<!DOCTYPE html>
<html>
    <head lang="zh">
        <meta http-equiv="Content-Type" content="text/html ;charset=utf-8">
        <meta name="google" content="notranslate" />
        <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"/>
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <link rel="shortcut icon" type="image/x-icon" href="{{URL::asset('handan/images/logo-icon.png')}}" />
        <title>EAI交易圈</title>
        <link rel="stylesheet" href="{{ URL::asset('index/css/base.css') }}"/>
    </head>
    <body>
        <div id="box_echarts" style="width:1000px;height:400px;"></div>
    </body>
</html>
<script src="{{URL::asset('public_js/jquery-3.2.1.min.js')}}"></script>
<script src="{{ URL::asset('public_js/src/echarts.js') }}"></script>
<script src="{{ URL::asset('js/layer/layer.js') }}"></script>
<script>
    var final   = "{{$str}}";
    var final_data = [];
    final_data = dataFn(final,final_data);
    function dataFn(id){
        var idData = [];
        id = id.split(';');
        id.forEach(function(data,index,arr){
            var point_val = data.split(',');
            var parr = [];
            if(point_val[0]){
                point_val.forEach(function (da,num,arr) {
                    if(num == 0){
                        parr.push(da);
                    }else{
                        parr.push(+da);
                    }
                });
                idData.push(parr);
            }
//          console.log(idData);
        });
        return idData;
    }
    var data = splitData(final_data);
    charts_one("box_echarts",data);
    //数组处理
    function splitData(rawData) {
        var datas = [];
        var times = [];
        var vols = [];
        var macds = []; var difs = []; var deas = [];
        for (var i = 0; i < rawData.length; i++) {
            datas.push(rawData[i]);
            times.push(rawData[i].splice(0, 1)[0]);
            vols.push(rawData[i][4]);
            macds.push(rawData[i][6]);
            difs.push(rawData[i][7]);
            deas.push(rawData[i][8]);
        }
        return {
            datas: datas,
            times: times,
            vols: vols,
            macds: macds,
            difs: difs,
            deas: deas
        };
    }

    //分段计算
    function fenduans(){
        var markLineData = [];
        var idx = 0; var tag = 0; var vols = 0;
        for (var i = 0; i < data.times.length; i++) {
            //初始化数据
            if(data.datas[i][5] != 0 && tag == 0){
                idx = i; vols = data.datas[i][4]; tag = 1;
            }
            if(tag == 1){ vols += data.datas[i][4]; }
            if(data.datas[i][5] != 0 && tag == 1){
                markLineData.push([{
                    xAxis: idx,
                    yAxis: data.datas[idx][1]>data.datas[idx][0]?(data.datas[idx][3]).toFixed(2):(data.datas[idx][2]).toFixed(2),
                    value: vols
                }, {
                    xAxis: i,
                    yAxis: data.datas[i][1]>data.datas[i][0]?(data.datas[i][3]).toFixed(2):(data.datas[i][2]).toFixed(2)
                }]);
                idx = i; vols = data.datas[i][4]; tag = 2;
            }

            //更替数据
            if(tag == 2){ vols += data.datas[i][4]; }
            if(data.datas[i][5] != 0 && tag == 2){
                markLineData.push([{
                    xAxis: idx,
                    yAxis: data.datas[idx][1]>data.datas[idx][0]?(data.datas[idx][3]).toFixed(2):(data.datas[idx][2]).toFixed(2),
                    value: (vols/(i-idx+1)).toFixed(2)+' M'
                }, {
                    xAxis: i,
                    yAxis: data.datas[i][1]>data.datas[i][0]?(data.datas[i][3]).toFixed(2):(data.datas[i][2]).toFixed(2)
                }]);
                idx = i; vols = data.datas[i][4];
            }
        }
        return markLineData;
    }

    //MA计算公式
    function calculateMA(dayCount) {
        var result = [];
        for (var i = 0, len = data.times.length; i < len; i++) {
            if (i < dayCount) {
                result.push('-');
                continue;
            }
            var sum = 0;
            for (var j = 0; j < dayCount; j++) {
                sum += data.datas[i - j][1];
            }
            result.push((sum / dayCount).toFixed(2));
        }
        return result;
    }

// 散点图表函数封装
function charts_one(id,data){
    var myChartB = echarts.init(document.getElementById(id));
    var option = {
        title: {
            text: '总盈K线周期图表(www.eaifx.com)',
            left: 0
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line'
            }
        },
        legend: {
            data: ['KLine', 'MA5']
        },
        grid: [           {
            left: '3%',
            right: '1%',
            height: '30%'
        },{
            left: '3%',
            right: '1%',
            top: '53%',
            height: '14%'
        },{
            left: '3%',
            right: '1%',
            top: '72%',
            height: '17%'
        }],
        xAxis: [{
            type: 'category',
            data: data.times,
            scale: true,
            boundaryGap: false,
            axisLine: { onZero: false },
            splitLine: { show: false },
            splitNumber: 20,
            min: 'dataMin',
            max: 'dataMax'
        },{
            type: 'category',
            gridIndex: 1,
            data: data.times,
            axisLabel: {show: false}
        },{
            type: 'category',
            gridIndex: 2,
            data: data.times,
            axisLabel: {show: false}
        }],
        yAxis: [{
            scale: true,
            splitArea: {
                show: false
            }
        },{
            gridIndex: 1,
            splitNumber: 3,
            axisLine: {onZero: false},
            axisTick: {show: false},
            splitLine: {show: false},
            axisLabel: {show: true}
        },{
            gridIndex: 2,
            splitNumber: 4,
            axisLine: {onZero: false},
            axisTick: {show: false},
            splitLine: {show: false},
            axisLabel: {show: true}
        }],
        dataZoom: [{
            type: 'inside',
            xAxisIndex: [0, 0],
            start: 20,
            end: 100
        },{
            show: true,
            xAxisIndex: [0, 1],
            type: 'slider',
            top: '93%',
            start: 0,
            end: 100
        },{
            show: false,
            xAxisIndex: [0, 2],
            type: 'slider',
            start: 20,
            end: 100
        }],
        series: [{
            name: '总盈K线周期图表(www.eaifx.com)',
            type: 'candlestick',
            data: data.datas,
            itemStyle: {
                normal: {
                    color: '#ef232a',
                    color0: '#14b143',
                    borderColor: '#ef232a',
                    borderColor0: '#14b143'
                }
            },
            markArea: {
                silent: true,
                itemStyle: {
                    normal: {
                        color: 'Honeydew'
                    }
                },
                data: fenduans()
            },
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                label: {
                    normal: {
                        position: 'middle',
                        textStyle:{color:'Blue',fontSize: 15}
                    }
                },
                data: fenduans(),
                symbol: ['circle', 'none']

            }
        }, {
            name: 'MA5',
            type: 'line',
            data: calculateMA(5),
            smooth: true,
            lineStyle: {
                normal: {
                    opacity: 0.5
                }
            }
        },{
            name: '单量',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: data.vols,
            itemStyle: {
                normal: {
                    color: function(params) {
                        var colorList;
                        if (data.datas[params.dataIndex][1]>data.datas[params.dataIndex][0]) {
                            colorList = '#ef232a';
                        } else {
                            colorList = '#14b143';
                        }
                        return colorList;
                    },
                }
            }
        },{
            name: '单均盈利',
            type: 'bar',
            xAxisIndex: 2,
            yAxisIndex: 2,
            data: data.macds,
            itemStyle: {
                normal: {
                    color: function(params) {
                        var colorList;
                        if (params.data >= 0) {
                            colorList = '#ef232a';
                        } else {
                            colorList = '#14b143';
                        }
                        return colorList;
                    },
                }
            }
        }
        ]
    };
    myChartB.setOption(option);
}
</script>
